<div class="pac-home__content" waIntersectionObserver waIntersectionThreshold="0.5">
    <div class="pac-home__body flex flex-col px-2 md:px-8 mt-4 mx-auto max-w-5xl lg:max-w-6xl">

        <h2 class="text-lg">{{ 'PAC.MENU.HOME.HELLO' | translate: {Default: "Hello"} }} 
            <span class="font-semibold">
                {{user$ | async | createdBy}}
            </span>
            !
        </h2>

        <!-- *ngIf="AbilityActions.Manage | able:'Story'"  -->
        <div class="pac-home__quick-guide flex flex-wrap justify-start items-center"
            [class.pac-dashboard__created-demo]="createdDemo()"
        >
          @if (demoPermission()) {
            <div class="step">
              @if (creatingDemo()) {
                <div class="complete mr-4 emoji-loader w-8 h-12" style="position: relative;"></div>
              } @else {
                <div class="complete mr-4">
                  @if (quickGuides().sample.complete) {
                    <span>🟢</span>
                  } @else {
                    <span>🔘</span>
                  }
                </div>
              }
                
                <span class="guide" >
                  @if (creatingDemo()) {
                    <span class="ml-4">
                        {{ 'PAC.MENU.HOME.GeneratingSamples' | translate: {Default: 'Generating Samples'} }}...
                    </span>
                  } @else {
                    <a class="cursor-pointer" (click)="createOrgDemo()">
                      @if (quickGuides().sample.complete) {
                        <span>{{ 'PAC.MENU.HOME.RegenerateSamples' | translate: {Default: 'Regenerate Samples'} }}</span>
                      } @else {
                        <span>{{ 'PAC.MENU.HOME.GenerateSamples' | translate: {Default: 'Generate Samples'} }}</span>
                      }
                    </a>
                  }
                </span>
            </div>
          }

          @if (quickGuides().model.complete) {
            <div class="step">
                <span class="complete mr-4">🟢</span>
                <span class="guide">
                    <a routerLink="/models" class="hover:underline">
                        <span class="text-lg font-bold italic">{{quickGuides().model.quantity}}</span>
                        {{ 'PAC.KEY_WORDS.SemanticModels' | translate: {
                            Default: 'Semantic Models',
                        } }}
                    </a>
                </span>
            </div>
          } @else {
            <div class="step">
                <span class="complete mr-4">🔘</span>
                <span class="guide">
                    <a routerLink="/models">
                        {{ 'PAC.MENU.HOME.CreateYourFirstSemanticModel' | translate: {Default: 'Create your first semantic model'} }}
                    </a>
                </span>
            </div>
          }

          @if (quickGuides().story.complete) {
            <div class="step" >
                <span class="complete mr-4">🟢</span>
                <span class="guide">
                    <a routerLink="/project" class="hover:underline">
                        <span class="text-lg font-bold italic">{{quickGuides().story.quantity}}</span>
                        {{ 'PAC.KEY_WORDS.Stories' | translate: { Default: 'Stories' } }}
                    </a>
                </span>
            </div>
          } @else {
            <div class="step" >
                <span class="complete mr-4">🔘</span>
                <span class="guide">
                    <a routerLink="/project">
                        {{ 'PAC.MENU.HOME.CreateYourFirstStory' | translate: {Default: 'Create your first story'} }}
                    </a>
                </span>
            </div>
          }
            
          @if (quickGuides().indicator.complete) {
            <div class="step" >
                <span class="complete mr-4">🟢</span>
                <span class="guide">
                    <a routerLink="/project/indicators" class="hover:underline">
                        <span class="text-lg font-bold italic">{{quickGuides().indicator.quantity}}</span>
                        {{ 'PAC.KEY_WORDS.Indicators' | translate: { Default: 'Indicators' } }}
                    </a>
                </span>
            </div>
          } @else {
            <div class="step" >
                <span class="complete mr-4">🔘</span>
                <span class="guide">
                    <a routerLink="/project/indicator">
                        {{ 'PAC.MENU.HOME.CreateYourFirstIndicator' | translate: {Default: 'Create your first indicator'} }}
                    </a>
                </span>
            </div>
          }
        </div>

        <div class="flex justify-between items-center self-stretch">
            <div>
                <input matInput class="pac-home__date-picker outline-none bg-transparent"
                    [matDatepicker]="picker" [formControl]="dateControl"
                    (click)="picker.open()">
                <mat-datepicker #picker></mat-datepicker>
            </div>

            <div class="flex items-center gap-2">
              @if (editable()) {
                <button mat-icon-button displayDensity="cosy"
                    [matTooltip]="'PAC.KEY_WORDS.RestoreLayout' |translate: {Default: 'Restore layout'}"
                    (click)="restore()">
                    <mat-icon fontSet="material-icons-outlined">restart_alt</mat-icon>
                </button>
                @if (dirty()) {
                    <button mat-icon-button displayDensity="cosy"
                        [matTooltip]="'PAC.KEY_WORDS.Undo' |translate: {Default: 'Undo'}"
                        (click)="undoEdit()">
                        <mat-icon fontSet="material-icons-outlined">undo</mat-icon>
                    </button>
                }
                <button mat-icon-button displayDensity="cosy"
                    [matTooltip]="'PAC.KEY_WORDS.Commit' |translate: {Default: 'Commit'}"
                    (click)="commitEdit()">
                    <mat-icon fontSet="material-icons-outlined">done</mat-icon>
                </button>
              } @else {
                <button mat-icon-button displayDensity="cosy"
                    [matTooltip]="'PAC.KEY_WORDS.Edit' |translate: {Default: 'Edit'}"
                    (click)="toggleEdit()">
                    <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
                </button>
              }
            </div>
        </div>

        <gridster class="" [options]="options" [ngClass]="{editable: editable()}">
          @for (feed of feeds(); track feed.id; let i = $index) {
            <gridster-item [item]="feed.options.position" class="pac-home__gridster-item"
                (itemChange)="onGridsterItemChange($event, feed)">
              @if (feed.type ==='StoryWidget') {
                <pac-story-widget-feed [id]="feed.entityId"/>
              }
              @if (feed.type === 'Recents') {
                <pac-feed-recents class="pac-home__my-recent pac-home__widget"/>
              }
              @if (feed.type ==='UserVisits') {
                <pac-feed-user-visit class="pac-home__widget"/>
              }

                <div class="pac-home__widget-actions">
                  @if (editable()) {
                    <button mat-icon-button displayDensity="cosy" class="pac-home__widget-remove"
                        (click)="$event.preventDefault();$event.stopPropagation();removeWidget(feed)">
                        <mat-icon>close</mat-icon>
                    </button>
                  }
                  @if (feed.type ==='StoryWidget') {
                    <button mat-icon-button displayDensity="cosy"
                        [routerLink]="['/story', feed.options.storyId]" [queryParams]="{pageKey: feed.options.pageKey, widgetKey: feed.options.widgetKey}">
                        <mat-icon fontSet="material-icons-round">launch</mat-icon>
                    </button>
                  }
                </div>
            </gridster-item>
          }
        </gridster>
    </div>

</div>
